<template>
  <el-dialog
    :title="categoryInfo ? 'Edit' : 'Insert'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="onClose"
  >
    <el-form
      ref="formEle"
      label-width="auto"
      :model="categoryForm"
      :rules="categoryFormRules"
      @submit.prevent="handleSubmit"
    >
      <el-form-item label="Name" prop="cate_name">
        <el-input v-model="categoryForm.cate_name"></el-input>
      </el-form-item>
      <el-form-item label="Index" prop="sort">
        <el-input-number v-model="categoryForm.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="Parent" prop="pid">
        <el-cascader
          style="width: 100%"
          v-model="categoryForm.pid"
          :options="categoryList"
          :props="{ label: 'cate_name', value: 'id', checkStrictly: true, emitPath: false }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="Status" prop="is_show">
        <el-switch :active-value="1" :inactive-value="0" v-model="categoryForm.is_show"></el-switch>
      </el-form-item>
      <el-form-item>
        <button hidden type="submit"></button>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit" :loading="isSubmitting">Submit</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { submitCategory } from '@/api/category';
import { computed, ref, nextTick, watch, } from 'vue';

interface PropsType {
  categoryInfo: CategoryInfoType | null;
  categoryList: CategoryInfoType[]
}

const props = defineProps<PropsType>()

const categoryForm = ref<CategoryFormType>({
  cate_name: '',
  is_show: 0,
  pid: null,
})

const categoryFormRules = computed(() => ({
  cate_name: [
    { required: true, message: 'Please enter the name of the category' }
  ]
}))

watch(
  () => props.categoryInfo,
  () => {
    new Promise<CategoryFormType>(resolve => {
      props.categoryInfo && resolve({
        cate_name: props.categoryInfo.cate_name,
        is_show: props.categoryInfo.is_show,
        pid: props.categoryInfo.pid,
        sort: props.categoryInfo.sort,
        pic: props.categoryInfo.pic,
        big_pic: props.categoryInfo.big_pic,
      })
    }).then(res => {
      categoryForm.value = res
    })
  },
  {
    immediate: true
  }
)

const emits = defineEmits(['update:modelValue', 'update:categoryInfo', 'submit'])

const formEle = ref(null)
const isSubmitting = ref(false)

function handleSubmit() {
  const form = formEle.value as any
  form.validate((valid: boolean) => {
    if (valid) {
      isSubmitting.value = true
      submitCategory(categoryForm.value, props.categoryInfo && props.categoryInfo.id).then(() => {
        emits('submit')
        onClose()
      }).finally(() => {
        isSubmitting.value = false
      })
    }
  })
}

function onClose() {
  const form = formEle.value as any
  form.resetFields()
  nextTick(() => {
    form.clearValidate()
    emits('update:modelValue', false)
    emits('update:categoryInfo', null)
  })
}
</script>